<template>
    <h2>当前求和为零:{{sum}}</h2>
    <button @click="sum++">点我加1</button>
    <br>
    <h2>当前信息:{{msg}}</h2>
    <button @click="msg+='!'">修改信息</button>
    <h2>姓名：{{person.name}}</h2>
    <h2>年龄：{{person.age}}</h2>
    <h2>薪资：{{person.job.j1.salary}}k</h2>
    <button @click="person.name+='~'">修改姓名</button>
    <button @click="person.age+=1">修改年龄</button>
    <button @click="person.job.j1.salary+=1">涨工资</button>
</template>

<script>
    import {ref,watch,reactive} from "vue"
    
export default {
    name:"Demo",
    setup(){
        //数据
        let sum = ref(0);
        let msg = ref("你好");
        let person = reactive({
            name:"张三",
            age:18,
            job:{
                j1:{
                    salary:20,
                }
            },
        });

        //情况一：监视ref定义的一个响应式数据
        /* watch(sum,(newValue,oldValue)=>{
            console.log("sum的值变了",newValue,oldValue);
        },{immediate:true}); */

        //情况二：监视ref定义的响应式数据
        /* watch([sum,msg],(newValue,oldValue)=>{
            console.log("sum或msg的值变了",newValue,oldValue);
        },{immediate:true}); */

        /* 情况三：监视reactive定义的响应式数据的所有属性
            1.注意，此处无法正确的获得oldValue 
            2.注意，强制开启了深度监视(deep配置无效)
        */
        /* watch(person,(newValue,oldValue)=>{
            console.log("person的值变了",newValue,oldValue);
        }); */

        /* 情况四：监视reactive定义的响应式数据中的某个属性
            1.注意，此处无法正确的获得oldValue 
            2.注意，强制开启了深度监视(deep配置无效)
        */
        /* watch(()=>person.age,(newValue,oldValue)=>{
            console.log("person的age值变了",newValue,oldValue);
        }); */

        /* 情况五：监视reactive定义的响应式数据中的某些属性
            1.注意，此处无法正确的获得oldValue 
            2.注意，强制开启了深度监视(deep配置无效)
        */
        /* watch([()=>person.age,()=>person.name],(newValue,oldValue)=>{
            console.log("person的age或name值变了",newValue,oldValue);
        }); */

        //特殊情况
        //此处由于监视的是reactive中定义的对象中的某个属性，所以要配置deep
        /* watch(()=>person.job,(newValue,oldValue)=>{
            console.log("person的job值变了",newValue,oldValue);
        },{deep:true}); */

        //返回一个对象(常用)
        return{
            sum,
            msg,
            person,
        }
    }
}
</script>


